<template>
  <div class="orders-page">
    <h2 class="section-title">我的订单</h2>
    <p class="section-description">查看和管理您的所有花束订单</p>
    
    <div class="orders-tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab.id" 
        class="tab-btn" 
        :class="{ 'active': activeTab === tab.id }"
        @click="activeTab = tab.id"
      >
        {{ tab.name }}
      </button>
    </div>
    
    <div class="orders-list" v-if="filteredOrders.length > 0">
      <div class="order-card" v-for="order in filteredOrders" :key="order.id">
        <div class="order-header">
          <div class="order-info">
            <h3 class="order-number">订单号: {{ order.id }}</h3>
            <span class="order-date">{{ order.date }}</span>
          </div>
          <span class="order-status" :class="order.status">{{ getStatusText(order.status) }}</span>
        </div>
        
        <div class="order-items">
          <div class="order-item" v-for="(item, index) in order.items" :key="index">
            <div class="item-image" :style="{ backgroundColor: item.color }"></div>
            <div class="item-details">
              <h4 class="item-name">{{ item.name }}</h4>
              <p class="item-price">¥{{ item.price }} × {{ item.quantity }}</p>
            </div>
          </div>
        </div>
        
        <div class="order-footer">
          <div class="order-total">
            <span>总计:</span>
            <span class="total-price">¥{{ order.total }}</span>
          </div>
          <div class="order-actions">
            <button class="btn-outline">查看详情</button>
            <button class="btn-primary" v-if="order.status === 'delivered'">再次购买</button>
            <button class="btn-outline" v-if="order.status === 'processing'">取消订单</button>
          </div>
        </div>
      </div>
    </div>
    
    <div class="empty-state" v-else>
      <div class="empty-icon">📦</div>
      <h3 class="empty-title">暂无订单</h3>
      <p class="empty-description">您还没有任何订单，去挑选一些美丽的花束吧！</p>
      <router-link to="/" class="btn-primary">浏览花束</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserOrders',
  data() {
    return {
      activeTab: 'all',
      tabs: [
        { id: 'all', name: '全部订单' },
        { id: 'processing', name: '处理中' },
        { id: 'shipped', name: '已发货' },
        { id: 'delivered', name: '已送达' },
        { id: 'cancelled', name: '已取消' }
      ],
      orders: [
        {
          id: 'ORD20250330001',
          date: '2025-03-30',
          status: 'processing',
          items: [
            { name: '浪漫玫瑰花束', price: 199, quantity: 1, color: '#ffcdd2' },
            { name: '精美包装', price: 20, quantity: 1, color: '#f8bbd0' }
          ],
          total: 219
        },
        {
          id: 'ORD20250325002',
          date: '2025-03-25',
          status: 'shipped',
          items: [
            { name: '向日葵花束', price: 159, quantity: 1, color: '#fff9c4' },
            { name: '贺卡', price: 10, quantity: 1, color: '#f5f5f5' }
          ],
          total: 169
        },
        {
          id: 'ORD20250310003',
          date: '2025-03-10',
          status: 'delivered',
          items: [
            { name: '百合花束', price: 229, quantity: 1, color: '#e1f5fe' },
            { name: '花瓶', price: 89, quantity: 1, color: '#b3e5fc' }
          ],
          total: 318
        },
        {
          id: 'ORD20250301004',
          date: '2025-03-01',
          status: 'cancelled',
          items: [
            { name: '混合花束', price: 179, quantity: 1, color: '#e8f5e9' }
          ],
          total: 179
        }
      ]
    };
  },
  computed: {
    filteredOrders() {
      if (this.activeTab === 'all') {
        return this.orders;
      }
      return this.orders.filter(order => order.status === this.activeTab);
    }
  },
  methods: {
    getStatusText(status) {
      const statusMap = {
        'processing': '处理中',
        'shipped': '已发货',
        'delivered': '已送达',
        'cancelled': '已取消'
      };
      return statusMap[status] || status;
    }
  }
};
</script>

<style scoped>
.orders-page {
  color: #333;
}

.section-title {
  color: #e75480;
  margin-bottom: 0.5rem;
}

.section-description {
  color: #666;
  margin-bottom: 2rem;
}

.orders-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.tab-btn {
  padding: 0.8rem 1.5rem;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  color: #666;
  transition: all 0.3s;
  white-space: nowrap;
}

.tab-btn:hover {
  background-color: #f8e1e7;
  color: #e75480;
}

.tab-btn.active {
  background-color: #e75480;
  color: white;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.order-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
}

.order-number {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

.order-date {
  color: #888;
  font-size: 0.9rem;
}

.order-status {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
}

.order-status.processing {
  background-color: #e3f2fd;
  color: #1976d2;
}

.order-status.shipped {
  background-color: #fff8e1;
  color: #ff8f00;
}

.order-status.delivered {
  background-color: #e8f5e9;
  color: #388e3c;
}

.order-status.cancelled {
  background-color: #ffebee;
  color: #d32f2f;
}

.order-items {
  padding: 1.5rem;
  border-bottom: 1px solid #eee;
}

.order-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.order-item:last-child {
  margin-bottom: 0;
}

.item-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}

.item-name {
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.item-price {
  color: #666;
  font-size: 0.9rem;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
}

.order-total {
  font-size: 1.1rem;
}

.total-price {
  font-weight: bold;
  color: #e75480;
  margin-left: 0.5rem;
}

.order-actions {
  display: flex;
  gap: 1rem;
}

.btn-outline {
  padding: 0.6rem 1.2rem;
  background: none;
  border: 1px solid #e75480;
  color: #e75480;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-outline:hover {
  background-color: #f8e1e7;
}

.btn-primary {
  padding: 0.6rem 1.2rem;
  background-color: #e75480;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-decoration: none;
  display: inline-block;
}

.btn-primary:hover {
  background-color: #d64d7b;
}

.empty-state {
  text-align: center;
  padding: 4rem 0;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.empty-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #333;
}

.empty-description {
  color: #666;
  margin-bottom: 2rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .order-footer {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  
  .order-actions {
    width: 100%;
    justify-content: space-between;
  }
}
</style>